<template>
  <div class="my-search">
    <div v-if="data.top" class="search-top">
      <div class="item-box">
        <FormItem v-model="formData[data.top.name]" :type="data.top.type" :placeholder="data.top.placeholder" />
      </div>
      <div class="btn-screen" :class="{ hide: !isShow }" @click="onToggle">
        筛选
      </div>
      <div class="tips-box">
        <SearchTip :data="tipsData" @setData="resetData" />
      </div>
    </div>
    <ElCollapseTransition>
      <div v-show="isShow" class="search-container">
        <div class="search-list">
          <div class="search-item" v-for="(item, index) in data.list" :key="index">
            <div v-if="item.type == 'GROUP'" class="search-item-group"
              :style="{ width: item.width ? `${item.width}px` : '' }">
              <div v-if="item.prepend" class="prepend">
                <FormItem v-model="formData[item.prepend.name]" :type="item.prepend.type"
                  :options="item.prepend.options" :placeholder="item.prepend.placeholder" />
              </div>
              <div v-if="item.append" class="append">
                <FormItem v-model="formData[item.append.name]" :type="item.append.type" :options="item.append.options"
                  :placeholder="item.append.placeholder" />
              </div>
            </div>
            <div v-else class="item-box" :style="{ width: item.width ? `${item.width}px` : '' }">
              <div class="tip">{{ item.title }}</div>
              <div class="input">
                <FormItem v-model="formData[item.name]" :type="item.type" :options="item.options"
                  :placeholder="item.placeholder" />
              </div>
            </div>
          </div>
          <div class="btn-list">
            <ElButton type="default" @click="onReset">重置</ElButton>
            <ElButton type="primary" @click="onSeatch">查询</ElButton>
          </div>
        </div>
      </div>
    </ElCollapseTransition>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, useAttrs, onMounted } from 'vue';
import { ElButton, ElCollapseTransition } from 'element-plus';
import FormItem from './form-item.vue'
import SearchTip from './search-tip.vue'

const props = defineProps(["data", "defaulValue"])
const emits = defineEmits(['onSeatch']);
const formData = ref({})

const isShow = ref(true)
const tipsData = ref([])
const onToggle = () => {
  isShow.value = !isShow.value
}

const resetData = (names) => {
  names?.forEach(name => {
    formData.value[name] = "";
  })
  onSeatch();
}

const setSearchTip = () => {
  const list = [];
  const fn = arr => {
    const temp = [];
    arr.forEach(item => {
      const value = formData.value[item.name];
      if (item.type == "INPUT" && value) {
        temp.push({ names: [item.name], tips: value })
      }
      if (item.type == "SELECT") {
        const options = item.options;
        const find = options?.find(val => val.value == value)
        if (find) {
          temp.push({ names: [item.name], tips: find.label })
        }
      }
      if (item.type == "DATERANGE" && value?.length) {
        temp.push({ names: [item.name], tips: value.join('~') })
      }
      if (item.type == "DATETIMERANGE" && value?.length) {
        temp.push({ names: [item.name], tips: value.join('~') })
      }
      if (item.type == "GROUP") {
        const newArr = [item.prepend, item.append]
        const tipList = fn(newArr)
        if (tipList?.length) {
          const names = [];
          let tips = [];
          tipList.forEach(val => {
            names.push(...val.names);
            tips.push(val.tips);
          })
          temp.push({ names: names, tips: tips.join(": ") })
        }
      }
    })
    return temp;
  }
  if (props.data.top) {
    list.push(...fn([props.data.top]))
  }
  if (props.data.list) {
    list.push(...fn(props.data.list))
  }
  console.log(111, list)
  tipsData.value = list;
}

const onSeatch = () => {
  formData.value = { ...formData.value, ...props.defaulValue }
  setSearchTip();
  emits('onSeatch', formData.value);
}
const onReset = () => {
  formData.value = { ...props.defaulValue }
  onSeatch();
}

onMounted(() => {
  onReset();
})
</script>
<style lang="scss" scoped>
.my-search {

  .search-top {
    margin-bottom: 12px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f3f5;

    .item-box {
      display: flex;
      align-items: center;
      width: 270px;
      height: 36px;
      background: #f7f8fa;
      border-radius: 8px;
    }

    .btn-screen {
      padding: 0 16px;
      height: 36px;
      line-height: 36px;
      color: #4080ff;
      font-size: 12px;
      cursor: pointer;
    }

    .tips-box {
      flex: 1;
      min-width: 0;
    }
  }

  .search-container {
    padding: 12px;
    border: 1px solid #f2f3f5;
    border-radius: 16px;
  }

  .search-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;

    .search-item {
      .item-box {
        display: flex;
        align-items: center;
        width: 256px;
        height: 36px;
        background: #f7f8fa;
        border-radius: 8px;

        .tip {
          padding: 0 0 0 12px;
          color: #14181f;
          font-size: 14px;
        }

        .input {
          flex: 1;
          min-height: 0;
        }

        &.big-width {
          width: 340px;
        }
      }

      .search-item-group {
        display: flex;
        align-items: center;
        width: 256px;
        height: 36px;
        background: #f7f8fa;
        border-radius: 8px;

        .prepend {
          flex: 0 0 102px;
        }

        .append {
          flex: 1;
          min-width: 0;
        }
      }
    }

    .btn-list {
      display: flex;
      align-items: center;

      ::v-deep .el-button {
        height: 36px;
        border-radius: 8px;

        &.el-button--default {
          background: #f7f8fa;
          color: #6c7786;
        }

        &.el-button--primary {
          background-color: #4080ff;
        }
      }
    }
  }
}
</style>
